<template>
  <!-- 安防信息 -- 消防设施  -->
  <view class="fireProtection">
    <view class="wrapper">
      <view
        class="wrapper_item"
        v-for="item in securityList"
        :key="item.id"
        :data-url="`${item.url}?companyId=${options.companyId}`"
        @click="handleClickRouter"
      >
        <view class="anName">
          <view class="title_name">
            {{ item.name }}
          </view>
          <view class="an_state">{{ item.caption }}</view>
        </view>
        <view class="perfect">
          {{ item.state == null ? "完善信息" : "去修改" }}>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { publicSecurityDetail } from "@/api/home.js";
import { handleClickRouter } from "@/utils/util.js";

export default {
  name: "fireProtection",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      options: {},
      securityList: [
        {
          id: 1,
          state: null, //  null 完善信息   0/1：去修改
          name: "安全通道",
          caption: "信息待完善",
          url: "/securityInfor/fireProtection/fireSafeChannel",
        },
        {
          id: 2,
          state: null,
          name: "应急照明灯",
          caption: "信息待完善",
          url: "/securityInfor/fireProtection/emergencyLight",
        },
        {
          id: 3,
          state: null,
          name: "消防栓",
          caption: "信息待完善",
          url: "/securityInfor/fireProtection/fireHydrant",
        },
        {
          id: 4,
          state: null,
          name: "应急预案",
          caption: "信息待完善",
          url: "/securityInfor/fireProtection/emergencyPlan",
        },
        {
          id: 5,
          state: null,
          name: "消防器材",
          caption: "信息待完善",
          url: "/securityInfor/fireProtection/fireFightingEquipment",
        },
      ],
    };
  },
  onLoad(options) {
    this.options = options;
  },
  onShow() {
    this.getList();
  },
  methods: {
    handleClickRouter,
    getList() {
      publicSecurityDetail({ companyId: this.options.companyId }).then(
        (res) => {
          if (res.code == 200) {
            if (Object.keys(res.result).length == 0) return false;

            let {
              secureChannelInfo,
              floodlightInfo,
              fireHydrantInfo,
              emergencyPlanInfo,
              fireToolInfo,
            } = res.result;

            if (secureChannelInfo.onSecureChannel) {
              this.securityList[0].state = 1;
              this.securityList[0].caption =
                secureChannelInfo.secureChannelCount + "条安全通道";
            } else if (secureChannelInfo.onSecureChannel == 0) {
              this.securityList[0].state = 0;
              this.securityList[0].caption = "无安全通道";
            }

            if (floodlightInfo.onFloodlight) {
              this.securityList[1].state = 1;
              this.securityList[1].caption =
                floodlightInfo.floodlightCount + "台应急照明灯";
            } else if (floodlightInfo.onFloodlight == 0) {
              this.securityList[1].state = 0;
              this.securityList[1].caption = "无应急照明灯";
            }

            if (fireHydrantInfo.onFireHydrant) {
              this.securityList[2].state = 1;
              this.securityList[2].caption =
                fireHydrantInfo.fireHydrantCount + "个消防栓";
            } else if (fireHydrantInfo.onFireHydrant == 0) {
              this.securityList[2].state = 0;
              this.securityList[2].caption = "无消防栓";
            }

            if (emergencyPlanInfo.onEmergencyPlan) {
              this.securityList[3].state = 1;
              this.securityList[3].caption = "已添加应急预案";
            } else if (emergencyPlanInfo.onEmergencyPlan == 0) {
              this.securityList[3].state = 0;
              this.securityList[3].caption = "无应急预案";
            }

            if (fireToolInfo.onFireTool) {
              this.securityList[4].state = 1;
              this.securityList[4].caption =
                fireToolInfo.pathList.length + "个消防器材";
            } else if (fireToolInfo.onFireTool == 0) {
              this.securityList[4].state = 0;
              this.securityList[4].caption = "无消防器材";
            }
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.fireProtection {
  flex: 1;
  background: #f9f9f9;

  .wrapper {
    margin: 20rpx;
  }

  .wrapper_item {
    display: flex;
    justify-content: flex-start;
    // align-items: center;

    margin-bottom: 20rpx;
    padding: 30rpx;
    border-radius: 16rpx;
    background: #fff;

    .anName {
      flex: 1;
      .title_name {
        margin-bottom: 10rpx;

        font-size: 32rpx;
        font-weight: bold;
        color: #000000;
      }

      .an_state {
        font-size: 24rpx;
        font-weight: 400;
        color: #bbbbbb;
      }
    }

    .perfect {
      padding: 0 13rpx;
      font-size: 24rpx;
      font-weight: 500;
      min-width: 96rpx;
      height: 35rpx;
      color: #858894;
    }
  }
}
</style>
